<template>
  <div class="sider">
    <a href="#" class="logo"
      ><img src="~@/assets/images/logo02.png" alt="logo"
    /></a>
    <div class="user_info">
      <img :src="userInfo.userPic" alt="person" />
      <span>欢迎&nbsp;&nbsp;{{ userInfo.nickname }}</span>
      <b>管理员</b>
    </div>
    <!-- 左侧导航栏 -->
    <div class="menu">
      <el-menu
        default-active="/mainCount"
        class="el-menu-vertical-demo"
        background-color="#323745"
        text-color="#ccc"
        router
      >
        <el-menu-item index="/mainCount">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="/articleList">
          <template slot="title">
            <i class="el-icon-tickets"></i>
            <span>文章管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/articleList">文章列表</el-menu-item>
            <el-menu-item index="/articleRelease">发表文章</el-menu-item>
            <el-menu-item index="/articleCategory">文章类别管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="/comment">
          <i class="el-icon-s-comment"></i>
          <span slot="title">评论管理</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <i class="el-icon-s-custom"></i>
          <span slot="title">个人中心</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 顶部栏 -->
    <div class="header_bar">
      <div class="user_center_link">
        <img :src="userInfo.userPic" alt="person" />
        <a href="javascript:void(0)" class="logout" @click="doLogout"
          ><i class="iconfont icon-tuichu"></i> 退出</a
        >
      </div>
    </div>
    <!-- 右侧主体内容 -->
    <div class="main" id="main_body">
      <!-- 路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
//导入接口
import { getUserInfo } from './home.js'
//导入mapState辅助函数
import { mapState } from 'vuex'
//导入token
import { removeToken } from '@/utils/token.js'
export default {
  name: 'index',
  data () {
    return {}
  },
  async created () {
    //1.加载个人详细信息
    let res = await getUserInfo()
    console.log(res)
    //2.存储到vuex
    this.$store.commit('updateUserInfo', res.data.data)
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    doLogout(){
      //(1)清除token
      removeToken()
      //(2)跳转登录页
      this.$router.push('/login')
    }
  },
}
</script>

<style lang="less">
#main_body {
  overflow-y: scroll;
}
</style>
